// tslint:disable:jsx-no-multiline-js
import React from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  View,
} from 'react-native';

export default class Tag extends React.Component{
  static defaultProps = {
    disabled: false,
    small: false,
    selected: false,
    closable: false,
    onClose() {},
    afterClose() {},
    onChange() {},
  };

  closeDom=View | null;

  constructor(props) {
    super(props);

    this.state = {
      selected: props.selected,
      closed: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.selected !== nextProps.selected) {
      this.setState({
        selected: nextProps.selected,
      });
    }
  }

  onClick = () => {
    const { disabled, onChange } = this.props;
    if (disabled) {
      return;
    }
    const isSelect: boolean = this.state.selected;
    this.setState(
      {
        selected: !isSelect,
      },
      () => {
        if (onChange) {
          onChange(!isSelect);
        }
      },
    );
  }

  onTagClose = () => {
    if (this.props.onClose) {
      this.props.onClose();
    }
    this.setState(
      {
        closed: true,
      },
      this.props.afterClose,
    );
  }

  onPressIn = () => {
    if (this.closeDom) {
      this.closeDom.setNativeProps({
        style: [
          styles.close,
          Platform.OS === 'ios' ? styles.closeIOS : styles.closeAndroid,
          {
            backgroundColor: '#888',
          },
        ],
      });
    }
  }

  onPressOut = () => {
    if (this.closeDom) {
      this.closeDom.setNativeProps({
        style: [
          styles.close,
          Platform.OS === 'ios' ? styles.closeIOS : styles.closeAndroid,
        ],
      });
    }
  }

  render() {
    const { children, disabled, small, closable, style } = this.props;
    const selected = this.state.selected;

    let wrapStyle;
    let textStyle;
    if (!selected && !disabled) {
      wrapStyle = styles.normalWrap;
      textStyle = styles.normalText;
    }
    if (selected && !disabled) {
      wrapStyle = styles.activeWrap;
      textStyle = styles.activeText;
    }
    if (disabled) {
      wrapStyle = styles.disabledWrap;
      textStyle = styles.disabledText;
    }

    const sizeWrapStyle = small ? styles.wrapSmall : {};
    const sizeTextStyle = small ? styles.textSmall : {};

    const closableDom =
      closable && !small && !disabled ? (
        <TouchableWithoutFeedback
          onPressIn={this.onPressIn}
          onPressOut={this.onPressOut}
          onPress={this.onTagClose}
        >
          <View
            ref={component => this.closeDom = component}
            style={[
              styles.close,
              Platform.OS === 'ios' ? styles.closeIOS : styles.closeAndroid,
            ]}
          >
            <Text
              style={[
                styles.closeText,
                Platform.OS === 'android' ? styles.closeTransform : {},
              ]}
            >
              ×
            </Text>
          </View>
        </TouchableWithoutFeedback>
      ) : null;

    return !this.state.closed ? (
      <View style={[styles.tag, style]}>
        <TouchableWithoutFeedback onPress={this.onClick}>
          <View style={[styles.wrap, sizeWrapStyle, wrapStyle]}>
            <Text style={[styles.text, sizeTextStyle, textStyle]}>
              {children}{' '}
            </Text>
          </View>
        </TouchableWithoutFeedback>
        {closableDom}
      </View>
    ) : null;
  }
}

const styles = StyleSheet.create({
  tag: {
    borderRadius: 3,
    backgroundColor: 'transparent',
    flexDirection: 'row',
    overflow: 'visible',
  },
  wrap: {
    overflow: 'hidden',
    borderRadius: 3,
    borderWidth: 0.5,
    borderStyle: 'solid',
    paddingVertical: 6,
    paddingHorizontal: 15,
  },
  wrapSmall: {
    paddingVertical: 1.5,
    paddingHorizontal: 5,
  },
  text: {
    fontSize: 12,
    textAlign: 'center',
  },
  textSmall: {
    fontSize: 10,
  },
  normalWrap: {
    backgroundColor: '#ffffff',
    borderColor: '#dddddd',
  },
  normalText: {
    color: '#888888',
  },
  activeWrap: {
    backgroundColor: '#ffffff',
    borderColor: '#108ee9',
  },
  activeText: {
    color: '#108ee9',
  },
  disabledWrap: {
    backgroundColor: '#dddddd',
    borderWidth: 0,
  },
  disabledText: {
    color: '#bbbbbb',
  },
  close: {
    position: 'absolute',
    backgroundColor: '#bbbbbb',
  },
  closeIOS: {
    borderRadius: 8,
    width: 16,
    height: 16,
    left: -5,
    top: -4,
    overflow: 'hidden',
  },
  closeAndroid: {
    width: 16,
    height: 32,
    left: -2,
    top: -10,
    transform: [{
      rotate: '45deg',
    }],
  },
  closeText: {
    color: '#ffffff',
    textAlign: 'center',
    fontSize: 20,
    lineHeight: 18,
  },
  closeTransform: {
    transform: [{
      rotate: '-45deg',
    }],
  },
})
